<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  </head>
  <style></style>
  <body>
    <div class="div">
      <ul class="ul">
        <li class="li">0001</li>
        <li class="li">0002</li>
        <li class="li">0003</li>
        <li class="li">0004</li>
        <li class="li">0005</li>
      </ul>
    </div>
    <form>
      <label for="" class="name">姓名</label>
      <input type="text" class="nameinput" />
      <input type="text" class="sexinput" />
      <fieldset>
        <label for="" class="name">年龄</label>
        <input type="text" class="ageinput" />
      </fieldset>
    </form>

    <div>
      <input type="checkbox" class="input1" />01
      <button class="btn3">03</button>
      <button class="btn5">05</button>
    </div>
    <script>
      // 入口函数 //等价
      // window.onload=function(){}
      // $(function(){})
      //
      //   $(function () {
      //     // jQuery对象：是一个拥有length属性以及属性名为索引的对象，是一个伪数组
      //     // 获取id为box的盒子  //等价于document.querySelector('#box')
      //     // console.log($("#div"));
      //     // 等价于document.querySelectorAll('li')
      //     // console.log($('ul'));
      //     // 等价于document.querySelectorAll('.li')
      //     // console.log($('.li'));
      //     // console.log($('.li')[2]);
      //     // 注意：把DOM对象和jQuery对象区分开
      //   });
      // 排他思想和链式编程
      //   $(function () {
      //     // 一个参数是拿取数据
      //     // console.log($($('.li')[2]).css('color'));
      //     // 给第三个li标签添加背景色，其他li标签去掉背景色（排他思想）
      //     // 链式编程
      //     // $($('.li')[2]).css('background-color','red').siblings().css('background-color','pink');
      //     // 注意：对于一些set类型的操作可以使用，get类型的操作不能直接使用，可以使用end方法返回上上个jQuery对象
      //     // $($('.li')[2]).css('background-color','red').siblings().css('background-color','pink').end().css('color','#')
      //     // get类型操作不能使用链式编程
      //     // $($('.li')[2]).css('color').css('color','red')

      //   });
      //   概念
      //   $(function () {
      //     // 1.jQuery对象命名以$开始
      //     // var $box=$('.div');
      //     // 2.将DOM对象转jQuery对象直接使用$()包裹即可
      //     // 3.将jQuery对象转换为DOM对象
      //     // [index]
      //     // get()
      //     // 4.eq获取jQuery对象
      //     // 如果有连接符要加引号
      //     // $('.li').eq(2).css({'font-size':'200px',color:'red'});
      //     // 注意：get()返回的是DOM对象，eq()返回的是jQuery对象
      //   });
      // 选择器
      $(function () {
        // 基本选择器
        // 通配符 *
        // console.log($('*'));
        // id选择器 #
        // console.log($('#box'));
        // class选择器.
        // console.log($('.li'));
        // 元素选择器
        // console.log($('li'));
        // 并集选择器，多个元素使用逗号隔开
        // console.log($('li,p'));
        // 属性选择器
        // console.log($('[name=name]'));
        //
        // 层级选择器
        // 子元素选择器
        // console.log($('ul > li'));
        // 相邻兄弟选择器
        // console.log($('li + li'));
        // 后代选择器
        // console.log($('ul li'));
        // 兄弟选择器
        // console.log($('ul li ~ li'));
        //
        // 过滤选择器
        //：first  第一个
        // console.log($('li:first'));
        // :last  最后一个
        // console.log($('li:last'));
        // :eq  第n个
        // console.log($('li:eq(2)'));
        // :odd  奇数
        // console.log($('li:odd'));
        // :even  偶数
        // console.log($('li:even'));
        // :contains 包含文本
        // console.log($('li:contains("000")'));
        // :not  排除
        // console.log($('li:not(:contains("2"))'));
        //
        //
        // 表单选择器
        // :input  所有输入元素
        // console.log($(':input'));
        // :text  文本框
        // console.log($(':text'));
        // :password  密码框
        // console.log($(':password'));
        // :radio  单选框
        // console.log($(':radio'));
        // :checkbox  复选框
        // console.log($(':checkbox'));
        // :submit  提交按钮
        // console.log($(':submit'));
        // :reset  重置按钮
        // console.log($(':reset'));
        // :button  按钮
        // console.log($(':button'));
        // :image  图片
        // console.log($(':image'));
        //
      });
      // 操作
      $(function () {
        // 元素操作
        // 遍历
        // each()是方法/函数  遍历元素
        // $('.li').each(function (index, element) {
        //   console.log(index, element);
        // });
        // map()  遍历元素并返回新元素
        // var newArr=$('.li').map(function (index, element) {
        //   return $(element).text()+'-'+index;
        // });
        // console.log(newArr);
        // 元素的操作
        // get()  获取元素
        // console.log($('.li').get(2));
        // index()  获取元素在父元素中的索引
        // console.log($('.li').eq(2).index());
        // $('xxx') 创建元素
        // prepend()  内部前置元素
        //  $('.ul').prepend('<li>99999</li>');
        // append()  内部后置元素
        // $('.ul').append('<li>99999</li>');
        // before()  外部前置元素
        //  $('.ul').before('<li>00000</li>');
        // after()  外部后置元素
        // $('.ul').after('<li>00000</li>');
        // remove()  删除元素
        // $('.li').eq(2).remove();
        // empty()  删除元素内所有内容
        // $('.li').eq(2).empty();
        // html('')  删除元素内所有内容和元素本身
        // $('.li').eq(2).html('');
        //
        // 
        // 属性操作
        // attr()  获取属性
        // console.log($('.input1').attr('checked'));
        // attr()  设置属性
        // $('.input1').attr('checked','checked');
        // prop()  获取属性（相当于attr()）
        // console.log($('.input1').prop('checked'));
        // prop()  设置属性（相当于attr()）
        // $('.input1').prop('checked',true);
        // removeAttr()  删除属性
        // $('.input1').removeAttr('checked');
        // data() 方法可以通过标签传递指定的数据
        // console.log($('.li').data('index'));
        // data() 方法可以通过标签传递指定的数据
        // $('.li').data('index',100);
        // removeData() 方法从元素中删除指定的数据
        // $('.li').removeData('index');
        //
        // 
        // 类操作
        // addClass()  给元素添加类
        // $('.li').addClass('active');
        // removeClass()  给元素删除类
        // $('.li').removeClass('active');
        // hasClass()  判断元素是否有指定类
        // console.log($('.li').hasClass('active'));
        // toggleClass()  切换元素类
        // $('.li').click(function(){
        //     $('.li').toggleClass('active');
        // })
        //
        // 
        // 尺寸操作
        // width()  获取元素宽度
        // console.log($('.li').width());
        // height()  获取元素高度
        // console.log($('.li').height());
        //
        // 
        // 样式操作
        // css()  获取样式
        // console.log($('.li').css('color'));
        // css()  设置样式
        // $('.li').css('color','red');
        // animate()  动画
        // $('.li').animate({left:'200px'},1000);
        // hide()  隐藏
        // $('.li').hide();
        // show()  显示
        // $('.li').show();
        // toggle()  切换显示和隐藏
        // $('.li').toggle();
        // $('.li').toggle(5000);
        //
        // 
        // 鼠标操作
        // click()  点击事件
        // $('.li').click(function () {
        //   console.log('click');
        // });
        // hover()  鼠标悬停事件
        // $('.li').hover(function () {
        //   console.log('mouse over');
        // },function () {
        //   console.log('mouse out');
        // });
        // mouseenter()  鼠标进入事件
        // $('.li').mouseenter(function () {
        //   console.log('mouse enter');
        // });
        // mouseleave()  鼠标离开事件
        // $('.li').mouseleave(function () {
        //   console.log('mouse leave');
        // });
        // mousedown()  鼠标按下事件
        // $('.li').mousedown(function () {
        //   console.log('mouse down');
        // });
        // mouseup()  鼠标抬起事件
        // $('.li').mouseup(function () {
        //   console.log('mouse up');
        // });
        // mousemove()  鼠标移动事件
        // $('.li').mousemove(function (e) {
        //   console.log('x:'+e.pageX+',y:'+e.pageY);
        // });
        //
        // 
        // on事件委托
        // $('.ul').on('click','.li',function () {
        //   console.log($(this).text());
        // });
        //
        // 
        // 内容操作
        // html()  获取内容（包括html标签）
        // console.log($('.li').html());
        // html('')  清空内容（包括html标签）
        // console.log($('.li').html(''));
        // html('<>可以传标签</>')  设置内容（包括html标签）
        // $('.li').html('<b>9999</b>');
        // text()  获取纯文本内容
        // console.log($('.li').text());
        // text()  设置纯文本内容
        // $('.li').text('1314')
        // 
        // 
        // 效果操作
        // fadeIn()  淡入
        // $('.li').fadeIn(1000);
        // fadeOut()  淡出
        // $('.li').fadeOut(1000);
        // fadeToggle()  淡入/淡出切换
        // $('.li').fadeToggle(1000);
        // slideDown()  向下滑入
        // $('.li').slideDown(1000);
        // slideUp()  向上滑出
        // $('.li').slideUp(1000);
        // slideToggle()  向下/向上滑入/滑出切换
        // $('.li').slideToggle(1000);
        // stop()  停止动画
        // $('.li').stop();
        // delay()  延迟执行
        // $('.li').delay(1000);
        //

      });
    </script>
  </body>
</html>
